<template>
    <!-- 我的询价-自主询价 -->
    <a-card style="width: 80rem ; margin-bottom:30px">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">

            <div style="display:flex;flex-wrap: wrap;">
                <a-form-item label="询价时间:" style="flex-basis: calc(50% - 5px)">
                    <a-date-picker v-model:value="formState.deadline" style="margin-left:10px" />
                </a-form-item>

            </div>



            <a-form-item label="询价类别" :label-col="{ span: 0 }" :rules="[{ required: false, message: '请选择询问类别' }]">
                <a-checkbox v-model:checked="isAllCheckedUse" @change="handleAllCheck('use')">全部</a-checkbox>
                <a-checkbox-group v-model:value="formState1.use">
                    <a-checkbox value="1" name="type">材料</a-checkbox>
                    <a-checkbox value="2" name="type">设备</a-checkbox>
                    <a-checkbox value="3" name="type">机械租赁</a-checkbox>
                    <a-checkbox value="4" name="type">劳务分包</a-checkbox>
                    <a-checkbox value="5" name="type">机械分包</a-checkbox>
                </a-checkbox-group>
            </a-form-item>

            <a-form-item label="价格用途" :label-col="{ span: 0 }" :rules="[{ required: false, message: '请输入价格用途!' }]">
                <a-checkbox v-model:checked="isAllCheckedPurpose" @change="handleAllCheck('purpose')">全部</a-checkbox>
                <a-checkbox-group v-model:value="formState.purpose">
                    <a-checkbox value="1" name="type">采购</a-checkbox>
                    <a-checkbox value="2" name="type">预算</a-checkbox>
                    <a-checkbox value="3" name="type">结算</a-checkbox>
                    <a-checkbox value="4" name="type">招投标</a-checkbox>
                </a-checkbox-group>
            </a-form-item>

            <a-form-item label="关键词：" :label-col="{ span: 0 }">
                <a-input-search v-model:value="value" placeholder="请选择内容" size="large" @search="onSearch"
                    style="width: 40%">
                    <template #enterButton>
                        <a-button style="background-color:#F6F6F6; "> 搜索 </a-button>
                    </template>
                </a-input-search>
            </a-form-item>

            <a-form-item :label-col="{ span: 0 }">
                <!-- 一个表格 -->
                <a-table :columns="columns" :data-source="dataSource">
                    
                </a-table>


            </a-form-item>


        </a-form>
    </a-card>
</template>

<script lang="ts">
import { color } from 'echarts';
import { reactive } from 'vue'
import { ref } from 'vue';

export default {
    setup() {
        const columns = [
            {
                title: '项目名称',
                dataIndex: 'column1'
            },
            {
                title: '项目地址',
                dataIndex: 'column2'
            },
            {
                title: '询价类别',
                dataIndex: 'column3'
            },
            {
                title: '价格用途',
                dataIndex: 'column4'
            },
            {
                title: '询价费用',
                dataIndex: 'column5'
            },
            {
                title: '状态',
                dataIndex: 'column6'
            },
            {
                title: '询价时间',
                dataIndex: 'column7'
            },
            {
                title: '操作',
                dataIndex: 'column8'
            }
        ];

        const originalData = [
            { key: '1', column1: 'Row 1', column2: 'Row 1', column3: 'Row 1', column4: 'Row 1', column5: 'Row 1', column6: 'Row 1', column7: 'Row 1', column8: 'Row 1' },
            { key: '2', column1: 'Row 2', column2: 'Row 2', column3: 'Row 2', column4: 'Row 2', column5: 'Row 2', column6: 'Row 2', column7: 'Row 2', column8: 'Row 2' },
        ];

        const dataSource = ref([...originalData]);

        const value = ref<string>('');

        const onSearch = () => {
            const keyword = value.value.toLowerCase();
            const filteredData = originalData.filter(row => {
                return Object.values(row).some(value => String(value).toLowerCase().includes(keyword));
            });
            dataSource.value = filteredData;
        };

        const formState = reactive({});
        const formState1 = reactive({});
        const isAllCheckedUse = ref(false);
        const isAllCheckedPurpose = ref(false);

        const handleAllCheck = (group: string) => {
            if (group === 'use') {
                formState1.use = isAllCheckedUse.value ? ['1', '2', '3', '4', '5'] : [];
            } else if (group === 'purpose') {
                formState.purpose = isAllCheckedPurpose.value ? ['1', '2', '3', '4'] : [];
            }
        };
        const onFinish = (values: any) => {
            console.log('Success:', values);
        };

        const onFinishFailed = (errorInfo: any) => {
            console.log('Failed:', errorInfo);
        };

        return {
            columns,
            dataSource,
            onFinishFailed,
            onFinish,
            onSearch,
            formState1,
            formState,
            value,
            handleAllCheck,
            isAllCheckedUse,
            isAllCheckedPurpose,
        };
    }
};
</script>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

}

.publish {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
</style>